<template>
  <div class="gat-container">
    <div ref="gantt" class="ga"></div>
    <ul class="menu">
      <li>新增阶段任务</li>
      <li>修改阶段任务</li>
      <li>删除阶段任务</li>
    </ul>
  </div>


</template>

<script>
import {gantt} from 'dhtmlx-gantt';

export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default() {
        return {data: [], links: []}
      }
    }
  },

  mounted: function () {
    let ul = document.getElementsByClassName("menu")[0];
    let that = this;
    // document.oncontextmenu = function(){
    //   return false;
    // }
    document.onclick = function () {
      ul.style.visibility = "hidden";
    }

    // gantt.attachEvent("oncontextmenu", function(id,cus,e) {
    //   if (e.clientX > 0 && e.clientX <360 && id) {
    //     ul.style.top = e.clientY + 18 + "px";
    //     ul.style.left = e.clientX + "px";
    //     ul.style.visibility = "visible";
    //   }
    // });
    gantt.config.start_date = new Date(2021, 10, 1, 0, 0);
    gantt.config.end_date = new Date(2021, 10, 2, 23, 59);
    gantt.config.columns = [
      {name: "text", label: "科目", tree: true, width: '*'},
      {name: "add", width: 44}
    ];
    gantt.config.duration_unit = "minute";
    gantt.i18n.setLocale("cn");
    gantt.config.scales = [
      {unit: 'hour', step: 1, date: `%H时`},
      {unit: 'minute', step: 20, date: "%i分"},
      {unit: "day", step: 1, format: "%Y年%m月%d日"},
    ];
    gantt.init(this.$refs.gantt);
    gantt.parse(this.$props.tasks);
    gantt.attachEvent("onLightboxSave", function (id, task, is_new) {
      //any custom logic here
      console.log(this.getTask(this.getTask(id).parent))
      return false;
    })

  }
}
</script>

<style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";

.gat-container {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.ga {
  height: 100vh;
}

.menu {
  position: absolute;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 150px;
  top: 0;
  visibility: hidden;
}
</style>